<!--toolbar-->
<md-toolbar color="primary">
  <span class="sidenav-toggle">
    <button md-mini-fab (click)="sidenav.toggle()">
      <md-icon>menu</md-icon>
    </button>
  </span>
  <span>GLAUCOMA</span>
</md-toolbar>

<!--Progress Bar-->
<md-progress-bar *ngIf="loadingStatus"
                 mode="query"
                 color="accent"
                 class="global-progress-bar"
></md-progress-bar>

<!--Side Panel-->
<md-sidenav-container class="sidenav-fab-container">
  <md-sidenav #sidenav mode="side" opened="true">
    <div class="scrolling-content">
      <md-tab-group>

        <md-tab>
          <ng-template md-tab-label>
            <md-icon>search</md-icon>
            Search
          </ng-template>

        <md-accordion class="headers-align">
          <md-expansion-panel [expanded]="true">
            <md-expansion-panel-header>
              <md-panel-title>
                Keyword Search
              </md-panel-title>
              <md-panel-description>
                Search product by Name
              </md-panel-description>
            </md-expansion-panel-header>
            <app-keyword-search></app-keyword-search>
          </md-expansion-panel>

          <md-expansion-panel>
            <md-expansion-panel-header>
              <md-panel-title>
                Structure search
              </md-panel-title>
              <md-panel-description>
                Search molecules by drawing molecular structure.
              </md-panel-description>
            </md-expansion-panel-header>
            <app-structure-search></app-structure-search>

          </md-expansion-panel>
        </md-accordion>
        </md-tab>

        <!--Browse-->
        <md-tab>
          <ng-template md-tab-label>
            <md-icon>import_contacts</md-icon>
            Browse
          </ng-template>

          <md-accordion class="headers-align">
            <md-expansion-panel [expanded]="true">
              <md-expansion-panel-header>
                <md-panel-title>
                  Database Browse
                </md-panel-title>
                <md-panel-description>
                  Browse compounds/targets
                </md-panel-description>
              </md-expansion-panel-header>
              <app-database-browse></app-database-browse>
            </md-expansion-panel>
          </md-accordion>
        </md-tab>

      </md-tab-group>
    </div>
  </md-sidenav>

  <div class="scrolling-content">
    <!--Result entity list or entity detail-->
    <router-outlet></router-outlet>
  </div>
</md-sidenav-container>
